<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="查询内容"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input-number style="width: 100%" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: right; margin-top: 3px">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <standard-table
        :columns="column"
        :dataSource="tableData"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="action" slot-scope="{ text, record }">
          <a @click="deleteRecord(record.key)">
            <a-icon type="delete" />删除
          </a>

          <router-link :to="`/list/query/detail/${record.key}`"
            >详情</router-link
          >
        </div>
        <div slot="contentF" slot-scope="{ record }">
          <div>
            {{
              contentFilter(
                record.userName,
                record.methodName,
                record.page,
                record.success
              )
            }}
          </div>
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
import { OpLoguser } from "@/api/log";
export default {
  name: "oplog",
  components: { StandardTable },
  data() {
    return {
      advanced: true,
      selectedRows: [],

      column: [
        {
          title: "ID",
          dataIndex: "id",
          sorter: true,
        },
        {
          title: "管理员",
          dataIndex: "userName",
          sorter: true,
        },
        {
          title: "日志内容",
          dataIndex: "content",
          scopedSlots: { customRender: "contentF" },
        },
        {
          title: "时间",
          dataIndex: "opTime",
          sorter: true,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      tableData: [
        {
          id: 0,
          name: "孙悟空",
          content: "篡改了生死簿（首页 - 生死簿）",
          time: new Date(),
        },
        {
          id: 1,
          name: "孙悟空",
          content: "篡改了生死簿（首页 - 生死簿）",
          time: new Date(),
        },
        {
          id: 2,
          name: "孙悟空",
          content: "篡改了生死簿（首页 - 生死簿）",
          time: new Date(),
        },
        {
          id: 3,
          name: "孙悟空",
          content: "篡改了生死簿（首页 - 生死簿）",
          time: new Date(),
        },
        {
          id: 4,
          name: "孙悟空",
          content: "篡改了生死簿（首页 - 生死簿）",
          time: new Date(),
        },
      ],
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  created() {
    this.loadData(null);
  },
  filter: {},
  methods: {
    loadData(data) {
      OpLoguser(data).then((res) => {
        this.tableData = res.data.rows;
      });
    },
    contentFilter(userName, methodName, page, success) {
      let m = "篡改";
      switch (methodName) {
        case "List":
          m = "查阅";
          break;
        case "Page":
          m = "翻阅";
          break;
        case "Edit":
          m = "篡改";
          break;
        case "Add":
          m = "增加";
          break;
        default:
          break;
      }

      return userName + success + "的 [" + m + "] " + page;
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
      this.selectedRows = this.selectedRows.filter((item) => item.key !== key);
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    remove() {
      this.dataSource = this.dataSource.filter(
        (item) =>
          this.selectedRows.findIndex((row) => row.key === item.key) === -1
      );
      this.selectedRows = [];
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    onSelectChange() {
      this.$message.info("选中行改变了");
    },
    addNew() {
      this.dataSource.unshift({
        key: this.dataSource.length,
        no: "NO " + this.dataSource.length,
        description: "这是一段描述",
        callNo: Math.floor(Math.random() * 1000),
        status: Math.floor(Math.random() * 10) % 4,
        updatedAt: "2018-07-26",
      });
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}
.fold {
  width: calc(100% - 216px);
  display: inline-block;
}
.operator {
  margin-bottom: 18px;
}
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
